<template>
	<div class="all2">
		<el-menu
		  :default-active="activeIndex2"
		  class="el-menu-demo"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#0b122e"
		  text-color="#00f6ff"
		  active-text-color="#ffd04b"  >
		  <span style="color: white;margin-left: 6%;font-size: 18px;float: left;padding-top: 1%;">网关信息</span>
		  <el-submenu index="5" class="submenu" style="float: right;">
		    <template slot="title">超级管理员</template>
		    <el-menu-item index="5-1">设置</el-menu-item>
		    <el-menu-item @click="content()" index="5-2">个人中心</el-menu-item>
		    <el-menu-item @click="exit()" index="5-3">退出</el-menu-item>
		  </el-submenu>
		</el-menu>
		<div class="main_content">
			<el-menu default-active="1" class="el-menu-vertical-demo">
			  </el-submenu>
			  <el-menu-item index="1">
			    <i class="el-icon-document" @click="show1()"></i>
			    <span slot="title">网关详情</span>
			  </el-menu-item>
			  <el-menu-item index="2">
			    <i class="el-icon-set-up" @click="show2()"></i>
			    <span slot="title">连接设备</span>
			  </el-menu-item>
			</el-menu>
			<div class="content" id="gateway" :style="display1">
			<el-card class="box-card">
					<div class="content1">
						<div class="content1_left">
							<img :src="gateway" class="image">
						</div>
						<div class="content1_right">
							<div class="right_text1">
								<span>网关名：</span><br /><br />
								<span>网关标识ID：</span><br /><br />
								<span>网关所在地：</span>
							</div>
							<div class="right_text2">
								<span>{{name}}</span><br /><br />
								<span>{{code}}</span><br /><br />
								<span>{{location}}</span>
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card">
					<div class="content3">
						<div class="content_text">
							<div class="right_text1" style="width:40%;">
								<span style="margin-right:15% ;"><i class="el-icon-price-tag" style="font-size:25px"></i>&nbsp;软件系统版本：&nbsp;&nbsp;{{version}}</span><br /><br />
								<span style="margin-right:15% ;"><i class="el-icon-cpu" style="font-size:25px"></i>&nbsp;CPU核心数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{cpu_cores}}</span>
							</div>
							<div class="right_text2">
								<span><i class="el-icon-notebook-2" style="font-size:25px"></i>&nbsp;操作系统信息：&nbsp;&nbsp;{{system_info}}</span><br /><br />
								<span><i class="el-icon-map-location" style="font-size:25px"></i>&nbsp;网关IP地址：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ip}}</span><br />
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card">
				<div class="content2">
					<div class="memory">
						<el-progress type="circle" stroke-width="15" class="memory_chart" :percentage="per1" style="float: left;"></el-progress>
						<div class="memory_text">
							<span>当前使用内存：{{real_memory}}</span><br /><br />
							<span>总内存：{{total_memory}}</span>
						</div>
					</div>
					<div class="memory1">
						<el-progress type="circle" stroke-width="15" class="memory_chart" :percentage="per2" style="float: left;"></el-progress>
						<div class="memory_text">
							<span>当前硬盘使用量：{{real_storage}}</span><br /><br />
							<span>总内存：{{total_storage}}</span>
						</div>
					</div>
					<div class="memory1">
						<el-progress type="circle" stroke-width="15" class="memory_chart" :percentage="cpu_rate" style="float: left;"></el-progress>
						<div class="memory_text">
							<br />
							<span>当前CPU使用率</span><br /><br />
						</div>
					</div>
				</div>
				</el-card>
			</div>
			<div class="content" id="device" :style="display2">
				<el-card class="box-card">
						<div class="content1">
							<div class="content1_left">
								<img :src="gateway" class="image">
							</div>
							<div class="content1_right">
								<div class="right_text1">
									<span>网关名：</span><br /><br />
									<span>网关标识ID：</span><br /><br />
									<span>网关所在地：</span>
								</div>
								<div class="right_text2">
									<span>{{name}}</span><br /><br />
									<span>{{code}}</span><br /><br />
									<span>{{location}}</span>
								</div>
							</div>
						</div>
					</el-card>
					<div class="device_content">
						<div class="device_info" v-for="(item,i) in list" >
							<div class="device">
								    <el-card :body-style="{ padding: '0px' }">
								      <div style="padding: 14px;">
										  <div class="device_card">
										  	<i class="el-icon-cpu"></i>
											<span style="font-size: 19px;">设备{{item.propertycode}}</span>
											<el-switch
											  v-model="item.status"
											  active-color="#13ce66"
											  inactive-color="#ff4949" style="float: right;" @change="open(item,i)">
											</el-switch><br />
											<p>{{item.propertydesc}}</p>
											<p>标识编码：{{item.propertycodetype}}</p>
											<p>标识类型：{{item.propertytype}}</p>
											<span>设备IP地址：{{item.ip}}</span><br />
											<el-button type="primary" style="float: right;margin-bottom: 18px;" icon="el-icon-edit" @click="edit(item,i)" circle></el-button>
											<el-dialog title="设备信息" :visible.sync="dialogFormVisible">
											  <el-form >
											    <el-form-item label="设备名称" :label-width="formLabelWidth">
												  {{form.name}}
											    </el-form-item>
											    <el-form-item label="产品介绍" :label-width="formLabelWidth">
											      <el-input type="textarea" v-model="form.desc"></el-input>
											    </el-form-item>
												<el-form-item label="标识编码" :label-width="formLabelWidth">
												  <el-input v-model="form.codetype"></el-input>
												</el-form-item>
												<el-form-item label="标识类型" :label-width="formLabelWidth">
												  <el-select v-model="form.type" placeholder="请选择标识类型">
												        <el-option label="STRING" value="STRING"></el-option>
												        <el-option label="DOUBLE" value="DOUBLE"></el-option>
														<el-option label="ENUM" value="ENUM"></el-option>
														<el-option label="FACTORY" value="FACTORY"></el-option>
														<el-option label="TECHNOLOGY" value="TECHNOLOGY"></el-option>
														<el-option label="WAREHOUSE" value="WAREHOUSE"></el-option>
												</el-select>
												</el-form-item>
												<el-form-item label="设备IP地址" :label-width="formLabelWidth">
												  {{form.ip}}
												</el-form-item>
											  </el-form>
											  <div slot="footer" class="dialog-footer">
											    <el-button @click="dialogFormVisible = false">取 消</el-button>
											    <el-button type="primary" @click="confirmEdit()">确 定</el-button>
											  </div>
											</el-dialog>
										  </div>
								      </div>
								    </el-card>
							</div>
					</div>
			</div>
			</div>
		</div>
		
	</div>
</template>
<!-- <template>
	<div class="all2">
		<div id="gatewayInfo">
			<div class="gateway_image">
				<img :src="gateway" class="image">
			</div>
			<div class="gateway_message">
				<div class="message1">
					<p class="name">网关标识ID:</p>
					<p class="name">网关运行状态:</p>
					<p class="name">网关软件系统版本:</p>
					<p class="name">硬盘总容量:</p>
					<p class="name">网关所处位置:</p>
					<p class="name">当前使用内存:</p>
					<p class="name">CPU核心数:</p>
				</div>
				<div class="message2">
					<p class="parameter">&nbsp;{{id}}</p>
					<p class="parameter">&nbsp;{{status}}</p>
					<p class="parameter">&nbsp;{{version}}</p>
					<p class="parameter">&nbsp;{{total_storage}}</p>
					<p class="parameter">&nbsp;{{location}}</p>
					<p class="parameter">&nbsp;{{real_memory}}</p>
					<p class="parameter">&nbsp;{{cpu_cores}}</p>
				</div>
				<div class="message3">
					<p class="name">网关名称:</p>
					<p class="name">总内存大小:</p>
					<p class="name">操作系统信息:</p>
					<p class="name">网关标识编码:</p>
					<p class="name">网关IP地址:</p>
					<p class="name">当前CPU使用率:</p>
					<p class="name">当前硬盘使用量:</p>
				</div>
				<div class="message4">
					<p class="parameter">&nbsp;{{name}}</p>
					<p class="parameter">&nbsp;{{total_memory}}</p>
					<p class="parameter">&nbsp;{{system_info}}</p>
					<p class="parameter">&nbsp;{{code}}</p>
					<p class="parameter">&nbsp;{{ip}}</p>
					<p class="parameter">&nbsp;{{cpu_rate}}</p>
					<p class="parameter">&nbsp;{{real_storage}}</p>
				</div>
			</div>
		</div>
		<div class="device_list">
			<el-divider></el-divider>
			<p style="font-size: 21px;margin-left: 50px;">网关设备</p>
			<div class="device_info" v-for="(item,i) in list" style="background-color: #0b122e;" >
				<div class="device" style="background-color: #0b122e;">
					    <el-card :body-style="{ padding: '0px' }" style="background-color: #0b122e;color:#00f6ff ;">
					      <div style="padding: 14px;background-color: #0b122e;">
							  <div class="device_card">
							  	<i class="el-icon-cpu"></i>
								<span style="font-size: 19px;">设备{{item.propertycode}}</span>
								<el-switch
								  v-model="item.status"
								  active-color="#13ce66"
								  inactive-color="#ff4949" style="float: right;" @change="open(item,i)">
								</el-switch><br />
								<p>{{item.propertydesc}}</p>
								<p>标识编码：{{item.propertycodetype}}</p>
								<p>标识类型：{{item.propertytype}}</p>
								<span>设备IP地址：{{item.ip}}</span><br />
								<el-button type="primary" style="float: right;margin-bottom: 18px;" icon="el-icon-edit" @click="edit(item,i)" circle></el-button>
								<el-dialog title="设备信息" :visible.sync="dialogFormVisible">
								  <el-form >
								    <el-form-item label="设备名称" :label-width="formLabelWidth">
									  {{form.name}}
								    </el-form-item>
								    <el-form-item label="产品介绍" :label-width="formLabelWidth">
								      <el-input type="textarea" v-model="form.desc"></el-input>
								    </el-form-item>
									<el-form-item label="标识编码" :label-width="formLabelWidth">
									  <el-input v-model="form.codetype"></el-input>
									</el-form-item>
									<el-form-item label="标识类型" :label-width="formLabelWidth">
									  <el-select v-model="form.type" placeholder="请选择标识类型">
									        <el-option label="STRING" value="STRING"></el-option>
									        <el-option label="DOUBLE" value="DOUBLE"></el-option>
											<el-option label="ENUM" value="ENUM"></el-option>
											<el-option label="FACTORY" value="FACTORY"></el-option>
											<el-option label="TECHNOLOGY" value="TECHNOLOGY"></el-option>
											<el-option label="WAREHOUSE" value="WAREHOUSE"></el-option>
									</el-select>
									</el-form-item>
									<el-form-item label="设备IP地址" :label-width="formLabelWidth">
									  {{form.ip}}
									</el-form-item>
								  </el-form>
								  <div slot="footer" class="dialog-footer">
								    <el-button @click="dialogFormVisible = false">取 消</el-button>
								    <el-button type="primary" @click="confirmEdit()">确 定</el-button>
								  </div>
								</el-dialog>
							  </div>
					      </div>
					    </el-card>
				</div>
			</div>

		</div>
	</div> -->
<!-- <!-- </template> -->

<script>
import axios from 'axios'
	export default{
		data(){
			return{
				per1:'',
				display1:'',
				display2:'display:none',
				gateway:require("../images/gateway.png"),
				gatewayId:'',
				dialogFormVisible: false,
				isCollapse:true,
				id:'   ',
				code:'   ',
				name:'   ',
				location:'   ',
				status:'  ',
				ip:'   ',
				total_memory:'  ',
				real_memory:'  ',
				version:'  ',
				cpu_rate:'  ',
				system_info:'  ',
				cpu_cores:'  ',
				total_storage:'  ',
				real_storage:'  ',
				uname:'',
				activeIndex: '1',
				activeIndex2: '1',
				list:'',
				did:'',
				dip:'',
				propertyCode:'',
				codeType:'',
				propertyDesc:'',
				propertyType:'',
				status:'',
				value:true,
				form: {
				          name: '',
						  code:'',
				          desc: '',
				          codetype: '',
				          type: '',
				          ip: '',
				        },
				formLabelWidth: '120px'
			};
		},
		created(){
			this.uname=localStorage.getItem('uname')
			this.gatewayId=this.$route.query.id
			console.log(this.gatewayId)
			axios({
				url:"http://localhost:8080/gateway/selectOne",
				method:'post',
				data:{
					id:this.gatewayId,
				}
			}).then(res=>{
				this.id=res.data.data.id
				this.code=res.data.data.code
				this.name=res.data.data.name
				this.location=res.data.data.location
				this.status=res.data.data.status
				this.ip=res.data.data.ip
				this.total_memory=res.data.data.totalmemory
				this.real_memory=res.data.data.realmemory
				this.version=res.data.data.version
				this.cpu_rate=res.data.data.cpurate
				this.system_info=res.data.data.systeminfo
				this.cpu_cores=res.data.data.cpucores
				this.total_storage=res.data.data.totalstorage
				this.real_storage=res.data.data.realstorage
				this.per1=this.real_memory/this.total_memory*100
				this.per2=this.real_storage/this.total_storage*100
			})
			axios({
				url:"http://localhost:8080/device/getList",
				method:'post',
				data:{
					id:this.gatewayId,
				}
			}).then(res=>{
				this.list=res.data.data;
				for(var i=0;i<this.list.length;i++){
					if(this.list[i].status=='1')
					{
						this.list[i].status=true;
					}
					else{
						this.list[i].status=false;
					}
				}
				for(var i=0;i<this.list.length;i++){
					console.log(i,this.list[i].status)
				}
			})
		},
		methods:{
			menuSet(){
				var flag=this.isCollapse
				this.isCollapse=!flag
			},
			show1(){
				this.display2='display:none'
				this.display1=''
			},
			show2(){
				this.display1='display:none'
				this.display2=''
			},
			open(item,i){
				let flag=item.status
				item.status=!item.status
				this.$confirm('确定修改设备状态？', '确认信息', {
				          distinguishCancelAndClose: true,
				          confirmButtonText: '保存',
				          cancelButtonText: '取消'
				        })
						
				          .then(() => {
							  flag ? item.status = true : item.status = false // 这一步很重要，row.showState会根据flag的值开启或关闭开关
				            this.$message({
				              type: 'info',
				              message: '状态修改成功！'
				            });
							this.changeStatus(item.id,item.status)
				          })
				          .catch(action => {
				            this.$message({
				              type: 'info',
				              message: action === 'cancel'
				                ? '取消成功'
				                : '停留在当前页面'
				            })
							
				          });
			},
			changeStatus(i,s){
				axios({
					url:"http://localhost:8080/device/changeStatus",
					method:'post',
					data:{
						id:i,
						status:s,
					},
				}).then(res=>{
					console.log(res)
				})
			},
			handleSelect(key, keyPath) {
			  console.log(key, keyPath);
			},
			exit() {
			  this.$confirm('退出登录, 是否继续?', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  })
			    .then(() => {
			      setTimeout(() => {
			        this.$store.commit('logout', 'false')
			        this.$router.push({ path: '/login' })
			        this.$message({
			          type: 'success',
			          message: '已退出登录!'
			        })
			      }, 1000)
			      // loginout()
			      //   .then(res => {
			      //     if (res.success) {
			      //       //如果请求成功就让他2秒跳转路由
			      //       setTimeout(() => {
			      //         this.$store.commit('logout', 'false')
			      //         this.$router.push({ path: '/login' })
			      //         this.$message({
			      //           type: 'success',
			      //           message: '已退出登录!'
			      //         })
			      //       }, 1000)
			      //     } else {
			      //       this.$message.error(res.msg)
			      //       this.logining = false
			      //       return false
			      //     }
			      //   })
			      //   .catch(err => {
			      //     // 获取图形验证码
			      //     this.getcode()
			      //     this.logining = false
			      //     this.$message.error('退出失败，请稍后再试！')
			      //   })
			    })
			    .catch(() => {
			      this.$message({
			        type: 'info',
			        message: '已取消'
			      })
			    })
			},
			edit(item,i){
				item.status=!item.status
				localStorage.setItem("editId",item.id)
				this.dialogFormVisible=true
				this.form.name="设备"+item.propertycode
				this.form.code=item.propertycode
				this.form.desc=item.propertydesc
				this.form.codetype=item.propertycodetype
				this.form.type=item.propertytype
				this.form.ip=item.ip
			},
			confirmEdit(){
				this.dialogFormVisible=false
				var editId=localStorage.getItem("editId")
				axios({
					url:"http://localhost:8080/device/updateOne",
					method:'post',
					data:{
						id:editId,
						propertycodetype:this.form.codetype,
						propertycode:this.form.code,
						propertydesc:this.form.desc,
						propertytype:this.form.type,
						ip:this.form.ip
					},
				}).then(res=>{
					this.$router.go(0)
				})
			}
		}
	}
</script>

<style>
.all2{
		font-family: "微软雅黑";
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		background-color: white;
		color: #00f6ff;
		position: relative;
		font-family: "微软雅黑";
		background-color: white;
		width: 100%;
		height: 100%;
		/* overflow: hidden; */
}
.el-menu-demo{
	width: 100%;
	height: 8%;
	font-family: "微软雅黑";
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 15%;
	  min-height: 100%;
	  float: left;
	  text-align: center;
}
.main_content{
	width: 100%;
	height: 92%;
	color: #000000;
}
.content{
	margin-left: 15%;
	width: 85%;
	height: 100%;
	font-size: 18px;
}
.content1{
	width: 100%;
	height: 30%;
	font-size: 18px;
}
.content2{
	width: 100%;
	height: 27%;
	margin-top: 2%;
	padding-bottom: 20%;
	font-size: 16px;
}
.content3{
	width: 100%;
	height: 20%;
	margin-top: 2%;
	padding-bottom: 3%;
}
.content_text{
	width: 75%;
	margin-left: 25%;
}
.content1_left{
	width: 15%;
	padding-left: 4%;
	padding-top: 2%;
	padding-bottom: 2%;
	/* background-color: skyblue; */
	float: left;
}
.image {
    width: 80%;
    display: block;
  }
.content1_right{
	width: 85%;
	margin-left: 15%;
	padding-top: 3%;
	padding-left: 10%;
	/* background-color: pink; */
}
.right_text1{
	width: 15%;
	float: left;
}  
.right_text2{
	width: 75%;
	margin-left: 15%;
}  
.memory{
	width: 25%;
	height: 100%;
	margin-left: 5%;
	float: left;
	padding-bottom: 3%;
}
.memory1{
	width: 25%;
	height: 100%;
	margin-left: 5%;
	float: left;
	padding-bottom: 3%;
}
.memory_text{
	margin-left: 40%;
	padding-top: 10%;
	padding-left: 5%;
	width: 50%;
}
.device_content{
	width: 100%;
	height: 75%;
	padding-top: 5%;
	padding-bottom: 5%;
}
/* .memory_chart{
	width: 70%;
	height: 100%;
	padding-left: 5%;
	background-color: #00F6FF;
} */
  
.message1{
	width: 24%;
	/* background-color: #13CE66; */
	float: left;
}
.message2{
	width: 24%;
	/* background-color: #3A8EE6; */
	margin-left: 1%;
	float: left;
}
.message3{
	width: 24%;
	margin-left: 1%;
	/* background-color: pink; */
	float: left;
}
.message4{
	width: 24%;
	margin-left: 76%;
}
#gatewayInfo{
		width: 90%;
		height: 45vh;
		margin-left: 5%;
		margin-top: 0.3%;
}
.device_list{
	width: 90%;
	height: 120vh;
	margin-left: 5%;
	margin-top: 3vh;
}
.gateway_image{
	float: left;
	width: 20%;
	/* height: 200px; */
	margin-left: 4%;
	margin-top: 2%;
}
.gateway_message{
	font-size: 18px;
	width: 70%;
	/* height: 1000px; */
	float: left;
	margin-left: 5%;
	/* background-color: powderblue; */
	padding-top: 1%;
}
.name{
	height: 10%;
	margin-right: 7%;
	margin-left: 5%;
	/* background-color: #409EFF; */
}
.parameter{
	/* background-color: #13CE66; */
	font-size: 18px;
	height: 10%;
	margin-right: 7%;
}
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .device_info{
	  width: 90%;
	 /* margin-left: 10%; */
	  /* height: 900px; */
  }
  .device{
	  float: left;
	  margin-left: 7%;
	  margin-right: 3%;
	  margin-bottom: 2%;
	  width: 23%;
  }
  
</style>
